import React from 'react';
import { Layout, Menu } from 'antd';
import { Switch, Redirect, Route, Link  } from 'react-router-dom';
import * as Icon from '@ant-design/icons';
import menuJson from "../menu.json";
import router from "./router";
const IconFont=(props)=>
{
    if(props.type){
        const S=Icon[props.type]
        return <S/>
    }else {
        return <p/>
    }

}
const {  Content, Sider } = Layout;
const { SubMenu } = Menu;

class Center extends React.Component {
    rootSubmenuKeys = [];
    state = {
        menus: [],
        openKeys: ['index']
    }

    onOpenChange = openKeys => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } else {
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
    };

    componentDidMount() {
        this.setState({
            menus: menuJson.data
        })

    }

    render(){
        const { menus, openKeys } = this.state;
        return(
            <div>
                <Layout>
                    <Layout>
                        <Sider width={200} style={{ background: '#fff' }}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['index']}
                                openKeys={openKeys}
                                onOpenChange={this.onOpenChange}
                                onClick={this.handleClick}
                                style={{ height: '100%', borderRight: 0 }}
                            >
                                {menus.map(menu => {
                                    if(menu.subMenus.length === 0){
                                        return (
                                            <Menu.Item
                                                key={menu.key}
                                            >
                                                <Link to={menu.path}>{menu.text}</Link>
                                            </Menu.Item>
                                        )
                                    }else{
                                        return (
                                            <SubMenu
                                                key={menu.key}
                                                title={
                                                    <span>{menu.text}</span>
                                                }
                                            >
                                                {menu.subMenus.map(subMenu => {
                                                    return (
                                                        <Menu.Item
                                                            key={subMenu.key}
                                                            icon={<IconFont type={subMenu.icon} />}
                                                        >
                                                            <Link to={subMenu.path}>{subMenu.text}</Link>
                                                        </Menu.Item>
                                                    )
                                                })}
                                            </SubMenu>
                                        )
                                    }
                                })}
                            </Menu>
                        </Sider>
                        <Layout style={{ padding: '0 0 24px 24px', height: window.innerHeight }}>
                            <Content
                                style={{
                                    background: '#fff',
                                    padding: '24px 24px 0 24px',
                                    margin: 0,
                                    minHeight: 600,
                                }}
                            >
                                <Switch>
                                    {
                                       Object.keys(router).map(path=>{

                                           return   <Route key={path} path={path} component={router[path]} />
                                       })
                                    }
                                    <Redirect from='/' to='/index'/>
                                </Switch>
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>
            </div>
        )
    }
}

export default Center;